<template>
  <div class="home-page">
    <header class="header">
      <i class="icon iconfont icon-fenlei" @click="showSidebar"></i>
      <span class="hot-news">今日热闻</span>
    </header>
    <div class="scroll-wrap">
      <scroller ref="scrollerEvent" class="news"
      @scroll="scroll"
      :probe-type="2"
      :listen-scroll="listenScroll"
      :data="stories"
      >
        <div>
          <swiper></swiper>
          <news-list :data="stories"></news-list>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
  import {
    TransferDom,
    Popup
  } from "vux";
  import axios from "axios";
  import Swiper from "components/swiper/swiper";
  import NewsList from "components/newsList/newsList";
  import Scroller from "components/scroller/scroller";
  import {
    log
  } from "util";
  import {
    mapMutations
  } from "vuex";
  export default {
    data() {
      return {
        stories: [] // 今日热闻数据
      };
    },
    created() {
      this.listenScroll = true;
      this.getNewData();
    },
    mounted() {
      setTimeout(() => {
        this.$refs.scrollerEvent.refresh();
      }, 20);
    },
    methods: {
      getNewData() {
        // 获取最新数据
        this.$vux.loading.show({
          text: "加载中..."
        });
        axios
          .get("api/news/latest")
          .then(res => {
            this.stories = res.data.stories;
            let ids = res.data.stories.map(item => item.id);
            this.addStoriesId({type: 'init', ids: ids}); // 保存所有新闻的ID
            setTimeout(() => {
              this.$vux.loading.hide();
            }, 100);
          })
          .catch(error => {
            console.log(error);
          });
      },
      scroll(pos) {
        this.scrollY = pos.y;
      },
      showSidebar() {
        this.changeSidebarStatu(true);
      },
      ...mapMutations({
        changeSidebarStatu: "CHANGE_SIDEBAR_STATU",
        addStoriesId: 'ADD_STORIES_ID'
      })
    },
    components: {
      Scroller,
      Swiper,
      NewsList,
      Popup
    }
  };

</script>
<style lang="less" scoped>


</style>
